// comment_list.js

import React from "react";
import CommentsView from './comments_view';
import { getFormatDate } from '../utils/date';
import './comment_list.css';

class CommentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e) {
        this.setState({
            value: e.target.value
        });
    }

    handleClick(e) {
        const content = this.state.value;
        if (content.length > 0) {
            this.props.onSubmit(this.state.value);
            this.setState({
                value: ''
            });
        } else {
            alert('Content of comment shoud not be null!');
        }
    }

    render() {
        const { comments, editable } = this.props;

        return (
            <div className="commentList">
                <div className="title">Comments</div>
                {editable ? (
                    <div className="editor">
                        <textarea placeholder='Post out your view'
                                  value={this.state.value}
                                  onChange={this.handleChange}
                        />
                        <button onClick={this.handleClick}>Submit</button>
                    </div>
                ) : null}
                <CommentsView comments = {comments} />
            </div>
        );
    }
}

export default CommentList;
